<div v-bind:class="[componentId]">
  <div class="cly-vue-compare-events__header bu-is-flex">
    <h2> {{i18n('compare.events.title')}} 
    </h2>
  </div>
  <cly-main>
    <div class="bu-mb-4 cly-vue-compare-events">
    <el-select
      style="width:620px"
      v-model="value"
      multiple
      popper-class="cly-vue-compare-apps__compare__width"
      filterable
      default-first-option
      :multiple-limit=maxLimit
      placeholder="Select maximum 20 events to compare">
      <el-option
      v-for="item in allEventsList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      </el-option>
    </el-select>
    <el-button :disabled="value.length===0" @click="compareEvents" class="cly-vue-compare-events__button" size="small" >{{i18n('compare.events')}}
    </el-button>
    </div>
    <div class="bu-pt-4 bu-mb-4">
    <cly-date-picker-g class="cly-vue-events-all-date-picker"></cly-date-picker-g>
    </div>
    <div class="bu-pt-3 bu-mb-5">
      <span class="text-big font-weight-bold bu-pr-2" >{{i18n('compare.results.by')}}</span>
      <el-select :arrow="false" :adaptiveLength="true" v-model="selectedGraph">
        <el-option v-for="item in availableMetrics" :key="item.key" :value="item.key" :label="item.label">
        </el-option>
      </el-select>
    </div>
    <cly-section>
    <div>
      <cly-chart-time :option="lineChartData" :legend="lineLegend" :force-loading="isChartLoading" :val-formatter="formatChartValue" v-loading="isChartLoading" category="events"></cly-chart-time>
    </div>
    </cly-section>
    <cly-section>
    <detail-tables></detail-tables>
    </cly-section>
  </cly-main>
  </div>